<template>
	<view>
		<view v-if="JSON.stringify(confirm) !== '{}'">
		   <approverMsg :value="confirm"></approverMsg>			
		</view> 
		<navigator class="left_box" v-if='light[0].order_id' :url="'/pages/order/detail/detail?order_id='+light[0].order_id">
			<text>查看定单详情</text>
		</navigator>
		<view class="hotelService" >
			<view v-for="(itemT,indexT) in light" :key="indexT">
				<view class="title">
					<text class="name">灯光信息({{indexT+1}})</text>
					<text class="delete" @click="deleteLight(indexT)">删除</text>
				</view>
				<view class="content">
					<!-- light_id -->
					<view class="box">
						<text>品牌</text>
						<picker @change="chooseLight"  :disabled="isEdit" :data-type="indexT"  range-key="title" :range="lightList">
							<view class="choose"  v-if="JSON.stringify(lightList)!='[]'">
								 <text :class="itemT.lightIndex!==''?'active':''">{{itemT.lightIndex===''?'请选择':light[indexT].light_text}}</text>
								 <image v-if="itemT.lightIndex===''" src="../../../static/images/right.png" mode=""></image>
							</view>
						</picker>
						<icon class="icon" v-if="itemT.lightIndex!==''"  type="clear" size="22upx"  @click="deleteLightChoose(indexT)"></icon>
					</view>
					<view class="box">
						<text>数量</text>
						<input type="digit" :disabled="isEdit" v-model="itemT.light_amount"  placeholder="请输入" placeholder-style="color:#999999;" />
					</view>
					<view class="box">
						<text>金额</text>
						<input type="digit" :disabled="isEdit" v-model="itemT.light_price"  placeholder="请输入" placeholder-style="color:#999999;" />
					</view>
					<view class="remark">
						<text>备注</text>
						<textarea type="text" :disabled="isEdit" v-model="itemT.light_remark" placeholder="请输入备注" placeholder-style="color:#999999;" />
					</view>
				</view>
			</view>
			<view class="addDetail" @click="addLight">
				增加明细
			</view>
		</view>
		
		<button type="default" class="order_btn" @click="saveFn()" v-if="options.api">保存</button>
		<auditProcess :value="confirmList" :btnValue="buttons" :isShowBtn="options.api?false:true" @resubmit='resubmits'></auditProcess>	
	</view>
</template>

<script>
	import approverMsg from "@/component/approverMsg.vue";//审核流程
	import auditProcess from "@/component/auditProcess.vue";//审核流程
	import selectBox from "@/component/selectBox.vue"
	import timeSelector from '@/component/wing-time-selector/wing-time-selector.vue';
	import navigation from "@/component/navigation.vue"
	import sun from '@/utils/sun.js'
	export default {
		components: {
			navigation,
			timeSelector,
			selectBox,
			approverMsg,
			auditProcess
		},
		data() {
			return {
				isEdit:false,
				light: [
					{   
						light_id:'',
						light_text:'',
						light_amount:"",//数量
						light_price:"",//金额
						light_remark:"",//备注
						lightIndex:''
					}
				], // 灯光
				lightList:[],
				options:'',
				confirmList:[],
				confirm:{},//审批信息
			}
		},
		onLoad(options) {
			//审核查看
			if(options.lookApproval){
				this.options= JSON.parse(options.lookApproval)
				this.isEdit =true;
				//查看信息
				this.getDetail(this.options)	
			}
			//添加
			if(options.params){
			   this.options= JSON.parse(options.params);
			   this.getData(this.options)//获取picker				
			}
			
			//查看
			if(options.id){				
			   this.options= options;
			   this.isEdit = true;
			   //查看信息
			   this.getDetail(this.options)			 
			}
		},
		methods: {
			//获取查看信息
			getDetail(e){
			  let that=this										
			  sun.request({
				url: '/h5/order.confirm/detail',
				showLoading: true,
				token:true,
				data:{
					id:e.id,
					type:e.user?'confirm_user':'',
				},
				success(res) {				
					if(res.code==200){								   
					   that.light=res.data.detail.light;	
					   that.confirmList=res.data.confirmList;	
                       that.confirm=res.data.confirm;//代表的是当前审核的信息										  
					   that.buttons=res.data.buttons;
					   //判断是否可以编辑
					   that.buttons.map((item,index)=>{
						   if(item.id=='update'){
						   	  that.isEdit = false;
						   }
					   })
					   that.lightList=res.data.lightList?res.data.lightList:''
					   that.light.map((item,index)=>{
						     that.lightList.map((items,indexs)=>{
						     	   if(item.light_id==items.id){
						     		  item.light_text=items.title;
									  item.threeIndex=indexs;									 
						     	   }
						        })
						      
					     })
					 }  
				},
				fail(e) {
					uni.showToast({
						icon: "none",
						title: "服务器开小差去啦~",
					})
				}
			  })						 
			},
			
			getData(e){
			  let that=this										
			  sun.request({
				url: e.read,
				showLoading: true,
				token:true,
				data:{
					order_id:e.order_id
				},
				success(res) {				
					if(res.code==200){								 
					    that.lightList = res.data.list?res.data.list:'';						
						that.confirmList = res.data.confirmList?res.data.confirmList:''
					}
				},
				fail(e) {
					uni.showToast({
						icon: "none",
						title: "服务器开小差去啦~",
					})
				}
			  })						 
			},
			//选择灯光
			chooseLight(e){
				     let arrayIndex =e.currentTarget.dataset.type;
					 this.lightIndex=e.target.value;
					 this.light[arrayIndex].lightIndex=e.target.value;
					 this.light[arrayIndex].light_id=this.lightList[this.lightIndex].id;
					 this.light[arrayIndex].light_text=this.lightList[this.lightIndex].title;
					 this.$forceUpdate()
				},
			//删除灯光
			deleteLightChoose(index){
				this.light[index].light_id='';
				this.light[index].light_text=''
				this.light[index].lightIndex=''; 
				this.$forceUpdate()
			},
			//删除灯光
			deleteLight(index){
				this.light.splice(index, 1);
			},
			//添加灯光
			addLight(){
				this.light.push({
					light_id:'',
					light_text:'',
					light_amount:"",//数量
					light_price:"",//金额
					light_remark:"",//备注
					lightIndex:''
				})
			},
			//提交审核
			saveFn(){			    
				let that=this;			
				sun.request({
					url: that.options.api,
					showLoading: true,
					token:true,
					data:{	
						order_id:that.options.order_id,						
						lightList:that.light?JSON.stringify(that.light):'',																		
					},
					success(res) {
					  if(res.code==200){							
							uni.redirectTo({
							 	url:"/pages/order/index"	
							})
							uni.showToast({
								icon:"none",
								title:res.msg
							})										
					  }else{
							 uni.showToast({
								icon:"none",
								title:res.msg
							 })	
					  }
					}
				})
			},
			// 编辑提交
			editFn(api,id){
				let that=this;
				sun.request({
					url: api,
					showLoading: true,
					token:true,
					data:{
						order_confirm_id:that.options.id,
						id:id?id:'',						
						lightList:that.light?JSON.stringify(that.light):'',																	
					},
					success(res) {
					  if(res.code==200){							
							uni.redirectTo({
							 	url:"/pages/order/index"	
							})
							uni.showToast({
								icon:"none",
								title:res.msg
							})										
					  }else{
							 uni.showToast({
								icon:"none",
								title:res.msg
							 })	
					  }
					}
				})
			},
			//底部评论按钮
			resubmits(item){				
				if(item.label=='同意'||item.label=='拒绝'||item.label=='评论'){
					this.commentFn(item)
				}else{
				   this.editFn(item.api,item.id)	
				}
								
			},
			// 编辑提交
			commentFn(e){
				let that=this;
				sun.request({
					url: e.api,
					showLoading: true,
					token:true,
					data:{						
						id:that.options.id?that.options.id:'',						
						content:e.content?e.content:'',
						image:e.image?e.image:'',
					},
					success(res) {
					  if(res.code==200){													
							uni.showToast({
								icon:"none",
								title:res.msg
							})
			               that.getDetail(that.options)																	
					  }else{
							 uni.showToast({
								icon:"none",
								title:res.msg
							 })	
					  }
					}
				})
			},
		}
	}
</script>

<style lang="less">
@import '../common.less';
</style>
